The Photoshop Guru's Handbook - "Creating the NUI" Part 3 - 2D & 3D (inDepth Interface project) Creating Inset Lines: ![]() These are THE easiest things to make. Here's how... To create indented/inset lines, or separaters for an interface, all you need are some lines crossing over the areas where you'd like the separations to be. And you can have as many as you want. This is easiest done using the Line tool. This image shows where i put my indented lines, or cut-outs, across my interface. ![]() Begin: - Start by creating a New layer at the top of the layers palette. Name it 'Inset-Lines'.Experiment with the other modes to see what effect they have. There's also another Blend mode that can give a subtle, but neat effect - Difference mode. I chose this mode for the sample image above. The effect though won't be obvious until we do this next group of steps. Ok that's your basic inset lines right there. Pretty simple huh? But wait! There's more! If you would like to use a larger shape and make it look inset in to the interface body, then just create the shape, and do all of the above steps the same way. Your shape, whether it be a circle, square, text, etc, will appear inset to the interface. The only difference with insetting larger shapes is that you might need to use a higher 'Height' setting in the Emboss filter. Try between 5 & 7, instead of 3. Another thing you can do for larger shapes is to Gaussian blur the shape by .5 pixels just before you apply the Emboss filter to it. That will help smooth the edges and produce a nicer effect. The Blend modes that work best for larger shapes are Softlight and Overlay. How about making the lines appear more 'molded' in to the interface, instead of cut-out from it? Sure! Take a look at this example image to see what i mean. ![]() Subtle? Yes, but nice and clean. Ok... to create that soft indent type of effect we'll need to Duplicate the Inset-Lines layer, and move the duplicate BELOW the Inset-Lines layer. Name this layer 'Inset-shadow'. Do that now. - Change you foreground colour to black. Now fill the lines on this layer with black, by pressing Alt+Shift+Delete.VOILA! This is where changed my 'Inset-lines' layer to Difference Blend mode. And to bring strengthen the effect a little more, i nudged my Inset-highlight layer back toward the left by 1 pixel. This is the image you see at the head of the page. It's a very subtle effect, but not so subtle as to go un-noticed. And still another 'groovy' look... You can also get another effect by reversing the shadow and highlight layers. It looks kind of like a 'groove' or deep cut-out effect. Have a look at this sample. ![]() To create this effect, just use the Move tool and nudge those two layers over by 3 pixels each. So move the Highlight layer 3 to the left, and the Shadow layer 3 to the right. We're just reversing them. If you also choose to stay with this grooved effect, then try playing around with the Blend mode for the Inset-Lines layer. You'll notice the look of the inset will change now when different blend modes are used for that layer. The change will be very subtle. But it's these very subtle characteristics that will produce the most realistic effects. GURU ADVICE: Take a look around you folks. Everything you see in the real world has so many teeny tiny subtle characteristics that you would need binoculars to see most of them. But to your naked eye, the ombient light around these objects are what give them their true shape and form. It's what produces your 'depth of field' perspective on 3 dimensional objects. So, the more subtle characteristics you give to your 3D creations, the more realistic they will look to the human eye. As an example, remember when 3D graphics first came to the movies? Eeewww... they were horrid and very UNrealistic looking. And that's only because the software being used at the time wasn't capable of adding the millions of subtlies to the 3D objects in the movies, to make them believable to the human eye; not without thousands of hours of tedious work. But nowadays 3D graphics have become so advanced that it's often hard to tell what's real and what's not onscreen. Take the movie Matrix, or Jurasic Park for example. So simply put... if you can't afford to put the most effort into your 3D effects, you can't expect them to come out as good as they could be. And that goes double for using 'quick-filters' for 3D effects. GURU SUPER TIP!: fastest fill in the west! Using the key combination of Alt+Shift+Delete can save you tons of time. Alt+Delete fills the active layer or selection with the foreground colour, adding the Shift key turns on the layer's 'preserve transparency' option temporarily while you do your fill. Will Photoshop wonders never cease! ;?) Back up to 'molded line' section above. Buttons / Texture Mapping / Adding Text > To the Top < > Back to "2D & 3D" < - Page 2 - |
"The Photoshop Guru's Handbook" ™ and all contents of this site are copyright 96/00 Mark Anthony Larmand - (aka theKeeper) all rights reserved. |